Day 3 準備部署環境

今天的內容是關於部署環境的準備，我們一樣會使用 Docker 來建立我們的部署環境。

但首先，我們需要先做出一個最簡單的 Discord Bot 來測試。

建立一個最簡單的 Discord Bot

1. 安裝 discord.js, dotenv, tsx

pnpm i discord.js dotenv
pnpm i -D tsx

1. 建立一個 .env 檔案來放 Bot Token

BOT_TOKEN=<TOKEN>

3. 建立執行 Bot 的 index.ts 檔案

import { config } from "dotenv";
import { Client, GatewayIntentBits } from "discord.js";

// 從 .env 檔案中讀取環境變數
config();

const client = new Client({
    // 必須先聲明我們的意圖
    intents: [
        GatewayIntentBits.MessageContent,
        GatewayIntentBits.Guilds,
        GatewayIntentBits.GuildMessages,
    ],
});

client.on("ready", () => {
    console.log("Ready!");
});

client.on("messageCreate", (message) => {
    if (message.content === "ping") {
        message.reply("Pong!");
    }
});

client.login(process.env.BOT_TOKEN);

4. 執行 index.ts 檔案

pnpm tsx index.ts

看起來是成功在開發環境運作了！

接著我們安裝 tsup 來轉譯 TypeScript 程式碼，進而減少部署時的 Image 大小。

5. 安裝 tsup

pnpm i -D tsup

新增 tsup.config.ts 檔案

import { defineConfig } from "tsup";

export default defineConfig((option) => ({
    entry: ["src/index.ts"],
    outDir: "dist",
    target: "node16",
    format: ["cjs"],
    shims: true,
    clean: true,
    splitting: false,
    bundle: false,
    minify: false, // minification 可能會導致除錯困難
}));

最後，記得新增一個 build script: tsup。

繼續寫 Dockerfile

回顧一下我們的 Dockerfile

FROM node:latest as dev

RUN npm i -g pnpm
WORKDIR /app

現在，我們要加上兩個新的 stage，運用多階段建置的方式，我們可以在部署環境中只安裝 production dependencies，這樣可以減少 Docker Image 的大小。

FROM node:latest as dev

RUN npm i -g pnpm
WORKDIR /app

FROM node:alpine as builder

RUN npm i -g pnpm
WORKDIR /app

COPY . .
RUN pnpm i && pnpm build && rm -rf node_modules && pnpm i --prod

FROM node:alpine as prod

WORKDIR /app
COPY --from=builder /app .

ENTRYPOINT [ "node", "packages/test/dist/index.js" ]

繼續寫 docker-compose.yml

回顧一下我們的 docker-compose.yml

version: "3.9"

services:
  dev:
    build:
      context: .
      target: dev
    image: jacoblincool/pure-cat:dev
    container_name: pure-cat-dev
    command: sleep infinity
    volumes:
      - .:/app
    depends_on:
      - db
  db:
    image: mongo:latest
    container_name: pure-cat-db
    ports:
      - "27017:27017"
    volumes:
      - db-storage:/data/db

volumes:
  db-storage: {}

現在，我們要加上一個新的 service，就叫它 prod 吧！

version: "3.9"

services:
  dev:
    build:
      context: .
      target: dev
    image: jacoblincool/pure-cat:dev
    container_name: pure-cat-dev
    command: sleep infinity
    volumes:
      - .:/app
    depends_on:
      - db
  db:
    image: mongo:latest
    container_name: pure-cat-db
    ports:
      - "27017:27017"
    volumes:
      - db-storage:/data/db
  prod:
    build:
      context: .
      target: prod
    image: jacoblincool/pure-cat:latest
    container_name: pure-cat
    env_file:
      - .env
    depends_on:
      - db

volumes:
  db-storage: {}

我們現在可以用 docker compose up -d prod 來啟動我們的 Bot 了！

如果需要看 Bot 的 log，可以用 docker compose logs -f prod。

明天來聊聊框架架構吧！

每日鐵人賽熱門 Top 10 (2022-09-18)

以 2022/09/17 20:00 ~ 2022/09/18 20:00 文章觀看數增加值排名

誤差： 1 小時

1. +243 「全端挑戰」學習Mern全端開發概念與動態網站開發流程懶人包
   • 作者： SamKo
   • 系列：自己做一個價值幾十萬的動態網站，學會Mern開發、前台UI設計各式觀念與各式Lib、typescript你該學會的前端技術
2. +223 Vite 是什麼？正確的發音怎麼唸！？
   • 作者： pjchender
   • 系列：我讀你看
3. +145 架設環境、了解npm指令、React與React Dom與創建第一個ReactApp
   • 作者： SamKo
   • 系列：自己做一個價值幾十萬的動態網站，學會Mern開發、前台UI設計各式觀念與各式Lib、typescript你該學會的前端技術
4. +120 如何製作月曆 control【 calendar | 我不會寫 React Component 】
   • 作者： HelloKayac
   • 系列：【 我不會寫 React Component 】
5. +116 導讀【 我不會寫 React Component 】
   • 作者： HelloKayac
   • 系列：【 我不會寫 React Component 】
6. +115 如何製作月曆 date grid 【 calendar | 我不會寫 React Component 】
   • 作者： HelloKayac
   • 系列：【 我不會寫 React Component 】
7. +113 專案建置【 我不會寫 React Component 】
   • 作者： HelloKayac
   • 系列：【 我不會寫 React Component 】
8. +98 了解Scss與React Component與首頁概念圖與UI實作
   • 作者： SamKo
   • 系列：自己做一個價值幾十萬的動態網站，學會Mern開發、前台UI設計各式觀念與各式Lib、typescript你該學會的前端技術
9. +94 義大利經典料理-波隆那肉醬
   • 作者： headhunter_sharon
   • 系列：拜託冰箱第二彈 跟著異國料理環遊世界吧
10. +92 [ReFlo : Day 1] 梳理荷爾蒙週期，更了解自己的身體
    • 作者： heiyuyu
    • 系列：ReFlo : 重新設計月經日曆 App

JavaScript 家族大勝利！排行榜前八名都是 JavaScript 相關的文章，然後第九名是篇料理文（？）。